<template>
  <div class="positionR flex1 flexC"
       style="height: 100%;padding-top: 3.5rem;box-sizing: border-box"
       :style="{width: width, height: height}">
    <p style="text-align: right;position: absolute;top: 3.5rem;left: 60vw;z-index: 2">
      <img src="../../../../assets/img/dataSea/left_arrow.png"
           @click="fxypCharRightChange()"
           class="pCharImage">
      <img src="../../../../assets/img/dataSea/right_arrow.png"
           @click="fxypCharLeftChange()"
           class="pCharImage">
    </p>
    <div class="echart_box"
         :id=echartId
         :style="{marginLeft: fxypCharLeft + 'px' , width: width, height: height}">
    </div>
  </div>
</template>

<script>
  export default {
    name: 'ColumnEchartView2',
    props: {
      divWidth: {
        type: String,
        default: '0'
      },
      width: {
        type: String,
        default: '98%'
      },
      height: {
        type: String,
        default: '98%'
      },
      echartId: {
        type: String,
        default: 'echartId'
      },
      fxypChar1Left: {
        type: Number,
        default: -120
      },
      arrX: {
        type: Array,
        default () {
          return []
        }
      },
      arrY: {
        type: Array,
        default () {
          return []
        }
      },
      arrY2: {
        type: Array,
        default () {
          return []
        }
      },
      arrY3: {
        type: Array,
        default () {
          return []
        }
      },
      arrY4: {
        type: Array,
        default () {
          return []
        }
      },
      arrY5: {
        type: Array,
        default () {
          return []
        }
      },
      legendData: {
        type: Array,
        default () {
          return ['', '', '', '', '']
        }
      }
    },
    watch: {
      divWidth (val) {
        this.divWidth = val
      },
      arrX: function (val) {
        this.arrX = val
      },
      width: function (val) {
        this.width = val
      },
      height: function (val) {
        this.height = val
      },
      echartId (val) {
        this.echartId = val
      },
      fxypChar1Left: function (val) {
        this.fxypChar1Left = val
      },
      arrY2: function (val) {
        this.arrY2 = val
      },
      arrY3: function (val) {
        this.arrY3 = val
      },
      arrY4: function (val) {
        this.arrY4 = val
      },
      arrY5: function (val) {
        this.arrY5 = val
      },
      legendData (val) {
        this.legendData = val
        this.columnEchartsInit(
            this.arrX,
            this.arrY,
            this.arrY2,
            this.arrY3,
            this.arrY4,
            this.arrY5,
            this.legendData,
            this.echartId
        )
      },
      arrY: function (val) {
        this.arrY = val
        this.columnEchartsInit(
            this.arrX,
            this.arrY,
            this.arrY2,
            this.arrY3,
            this.arrY4,
            this.arrY5,
            this.legendData,
            this.echartId
        )
      }
    },
    data () {
      return {
        fxypCharLeft: this.fxypChar1Left,
        JTDivWidth: this.divWidth,
        JTHeight: this.height
      }
    },
    mounted () {
      this.columnEchartsInit(
          this.arrX,
          this.arrY,
          this.arrY2,
          this.arrY3,
          this.arrY4,
          this.arrY5,
          this.legendData,
          this.echartId
      )
    },
    methods: {
      fxypCharLeftChange () {
        if (this.fxypCharLeft > -1640) {
          this.fxypCharLeft -= 50
        }
      },
      fxypCharRightChange () {
        if (this.fxypCharLeft < -20) {
          this.fxypCharLeft += 50
        }
      },
      columnEchartsInit (dataX, dataY, dataY2, dataY3, dataY4, dataY5, legendData, echartsId) {
        const echartElement = this.$echarts.init(document.getElementById(echartsId))
        echartElement.clear()
        const option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              // 坐标轴指示器，坐标轴触发有效
              type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          legend: {
            data: legendData,
            itemHeight: 12,
            itemWidth: 18,
            top: 0,
            left: '20%',
            textStyle: {
              color: '#ffffff'
            }
          },
          grid: {
            top: '10%',
            left: '1%',
            right: '1%',
            bottom: '1%',
            containLabel: true
          },
          xAxis: {
            interval: 90,
            axisLabel: {
              textStyle: {
                color: '#fff',
                fontSize: 10
              }
            },
            axisTick: { show: false },
            splitArea: { show: false },
            axisLine: { show: false },
            data: dataX
          },
          yAxis: [
            {
              type: 'value',
              min: 0,
              max: 80000,
              axisLine: { lineStyle: { color: 'rgb(255,255,255)' } },
              axisTick: { lineStyle: { color: 'rgb(255,255,255)' } },
              splitLine: {
                show: false
              },
              axisLabel: {
                color: '#FFFFFF',
                formatter: '{value}'
              }
            }
          ],
          color: ['#ff5719', '#face35', '#00B3FF'],
          series: [{
            type: 'bar',
            name: legendData[0],
            barWidth: 10,
            data: dataY3
          }, {
            type: 'bar',
            name: legendData[1],
            barWidth: 10,
            data: dataY2
          }, {
            type: 'bar',
            name: legendData[2],
            barWidth: 10,
            data: dataY
          }]
        }
        echartElement.setOption(option)
        window.addEventListener('resize', () => {
          echartElement.resize()
        })
      }
    }
  }
</script>

<style scoped>
  .echart_box {
    width: 2000px;
    margin: 0 auto;
  }

  .pCharImage {
    width: 2.625rem;
    height: 1.75rem;
    margin-left: 1rem;
  }
</style>
